<!-- src/components/Home.vue -->
<template>
  <div class="home-container">
    <!-- 顶栏 -->

    <div class="home-content">
      <!-- 左侧图片 -->
      <div class="left-image">
        <img src="https://s2.loli.net/2022/01/28/pHoly5JTvrXeDw3.png" alt="首页图片" />
      </div>
      <!-- 右侧待办事项 -->
      <div class="right-todo">
        <el-card class="todo-card">
          <div slot="header" class="clearfix">
            <span>待办事项</span>
            <el-button type="text" @click="addTodo">添加待办</el-button>
          </div>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item v-for="(item, index) in todoList" :key="index" :title="item.title" :name="index">
              <div>{{ item.content }}</div>
              <el-button type="text" @click="deleteTodo(item.pkBid)">删除</el-button>
            </el-collapse-item>
          </el-collapse>
          <div class="todo-footer">
            <span>共有 {{ todoList.length }} 项待办事项</span>
            <el-button type="text" @click="expandAll">展开全部</el-button>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 添加待办模态框 -->
    <el-dialog title="添加待办事项" :visible.sync="dialogVisible" width="30%">
      <el-form :model="newTodo" ref="newTodoForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="newTodo.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" v-model="newTodo.content" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddTodo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Home',
  data() {
    return {
      userId: localStorage.getItem("userId") || '',
      activeNames: [],
      todoList: [],
      dialogVisible: false,
      newTodo: {
        title: '',
        content: '',
      }
    };
  },

  created(){
    this. fetchTodoList(this.userId)
    
  },


  methods: {

    fetchTodoList(userId){
      axios.get("/api/backlog/all",{params:{userId:userId}}).then(response => {
        this.todoList = response.data
      }).catch(err => {
        this.$message.error("未获取到待办事项")
      })
    },

    handleChange(val) {
      console.log(val);
    },
    expandAll() {
      this.activeNames = this.todoList.map((item, index) => index);
    },
    addTodo() {
      this.dialogVisible = true;
    },
    confirmAddTodo() {
      if (this.newTodo.title && this.newTodo.content) {

        let backlog = {
          title: this.newTodo.title,
          content: this.newTodo.content,
          userId: this.userId
        }

        axios.post("/api/backlog/add",backlog).then(response => {

          this.fetchTodoList(this.userId)
          //this.todoList.push({ ...this.newTodo });
          this.newTodo.title = '';
          this.newTodo.content = '';
          this.dialogVisible = false;

        }).catch(err => {
          this.$message.error("添加待办失败，请稍后重试")
        })

      } else {
        this.$message.warning('请填写完整的待办事项信息');
      }
    },
    deleteTodo(id) {
      console.log("aaaaaaaaaaaaaaaaaaaa="+id)
      this.$confirm('确定要删除待办事项码？','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{

          axios.get("/api/backlog/del?id="+id).then(response =>{
            console.log(response.data)
            this.fetchTodoList(this.userId)
          }).catch(err=>{
            this.$message.error("删除待办失败")
          })

      }).catch(() => {
        this.$message({
          type:'info',
          message:'已取消'
        })
      })

      
    }
  }
};
</script>

<style scoped>
.home-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.home-content {
  display: flex;
  width: 80%;
  max-width: 1200px;
}

.left-image {
  flex: 1;
  margin-right: 20px;
}

.left-image img {
  width: 100%;
  border-radius: 8px;
}

.right-todo {
  flex: 1;
}

.todo-card {
  width: 100%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.todo-footer {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.todo-footer span {
  margin-right: auto;
}
</style>